<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="20">
      <el-col :span="12">
        <h1>统计</h1>
        <div class="payTotalDiv">
          <div class="payTotalDivData1">订单总数: {{ countPay }}</div>
        </div>
        <div class="payTotalDiv">
          <div class="payTotalDivData2">物业经营性收益: ￥{{ totalPay }}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <h1>2021-2023年 年度收益图</h1>
        <div>
          <ve-histogram :data="annualEarnings"></ve-histogram>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="mod-eightapp__eipayinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="请输入收据编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getDataList"></el-button>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-input v-model="byPayOwnerId" placeholder="请输入业主编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getPayInfoDataListByOwnerId"></el-button>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-select v-model="byPayMemo" @change="getPayInfoDataListByMemo">
            <el-option v-for="item in allTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-form-item>
        </el-form-item>

        <el-form-item>
          <el-button v-if="$hasPermission('eightapp:eipayinfo:delete')" type="danger" @click="deleteHandle()"
                     icon="el-icon-delete"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportHandle()">{{ '导出数据为Excel文件' }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="收据编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ownerId" label="业主编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="costId" label="费用编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="payTime" label="缴纳时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="total" label="费用总计" header-align="center" align="center"></el-table-column>
        <el-table-column prop="memo" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creator" label="建表人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" label="建表时间" header-align="center" align="center"></el-table-column>
        <!--        <el-table-column prop="updator" label="更新人" header-align="center" align="center"></el-table-column>-->
        <!--        <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
        <el-table-column prop="state" label="缴费状态" header-align="center" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.state == 1 ? '已支付' : ' 未支付' }}</p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('eightapp:eipayinfo:delete')" type="danger" icon="el-icon-delete" circle
                       @click="deleteHandle(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './eipayinfo-add-or-update'
import {formatDate} from "element-ui";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/eightapp/eipayinfo/page',
        getDataListIsPage: true,
        exportURL: '/eightapp/eipayinfo/export',
        deleteURL: '/eightapp/eipayinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      allDataList: [],
      byPayOwnerId: '',
      allTypes: [{
        value: '',
        label: '所有费用类型'
      }, {
        value: '水费',
        label: '水费'
      }, {
        value: '电费',
        label: '电费'
      }, {
        value: '停车费',
        label: '停车费'
      }, {
        value: '物业费',
        label: '物业费'
      }, {
        value: '供暖费',
        label: '供暖费'
      }],
      byPayMemo: '',
      countPay: '',
      totalPay: '',
      annualEarnings: {
        columns: ['年份', '总收益'],
        rows: [
          {'年份': 2021, '总收益': 0},
          {'年份': 2022, '总收益': 0},
          {'年份': 2023, '总收益': 0}
        ]
      },
      threeYears: [2021, 2022, 2023],
      beforeLastYear: 0,
      lastYear: 0,
      thisYear: 0,
      K: 0
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.getPayInfoAllDataList();
    this.K = 2;
  },
  methods: {
    /**
     * 获取订单表所有信息------PayInfo
     */
    getPayInfoAllDataList() {
      this.$http.get('eightapp/eipayinfo/getPayInfoAllDataList')
          .then(({data: res}) => {
            this.allDataList = res.data;
            this.getCountPayAndTotalPay();
            this.getAnnualEarnings();
          }).catch(() => {
      })
    },
    /**
     * 根据业主ID获取订单------PayInfo
     */
    getPayInfoDataListByOwnerId() {
      this.initializeByPayMemo();
      this.dataListLoading = true;
      if (this.byPayOwnerId == '') {
        this.dataList = this.allDataList;
        this.dataListLoading = false;
      } else {
        this.$http.get('eightapp/eipayinfo/getPayInfoDataListByOwnerId/' + this.byPayOwnerId)
            .then(({data: res}) => {
              this.dataList = res.data;
              this.dataListLoading = false;
            }).catch(() => {
        })
      }
    },
    /**
     * 根据费用类型获取订单------PayInfo
     */
    getPayInfoDataListByMemo() {
      this.initializeByPayOwnerId();
      this.dataListLoading = true;
      if (this.byPayMemo == '') {
        this.dataList = this.allDataList;
        this.dataListLoading = false;
      } else {
        this.$http.get('eightapp/eipayinfo/getPayInfoDataListByMemo', {
          params: {memo: this.byPayMemo}
        }).then(({data: res}) => {
          this.dataList = res.data;
          this.dataListLoading = false;
        }).catch(() => {
        })
      }
    },
    /**
     * byPayOwnerId的初始化方法
     */
    initializeByPayOwnerId() {
      this.byPayOwnerId = '';
    },
    /**
     * byPayMemo的初始化方法
     */
    initializeByPayMemo() {
      this.byPayMemo = '';
    },

    /**
     * 获取订单总数和物业经营性收益
     */
    getCountPayAndTotalPay() {
      let countP = 0;
      let countT = 0;
      for (let i = 0; i < this.allDataList.length; i++) {
        countP++;
        countT += this.allDataList.at(i).total;
      }
      this.countPay = countP;
      this.totalPay = countT;
    },

    /**
     * 以下为柱状图相关方法
     *
     * 为柱状图的每个属性的'总收益'赋值
     */
    getAnnualEarnings() {
      for (let i = 0; i < this.threeYears.length; i++) {
        this.$http.get('eightapp/eipayinfo/getPayInfoTotalByYear', {
          params: {year: this.threeYears.at(i)}
        }).then(({data: res}) => {
          if (i == 0) {
            this.annualEarnings.rows[0]['总收益'] = res.data;
          } else if (i == 1) {
            this.annualEarnings.rows[1]['总收益'] = res.data;
          } else if (i == 2) {
            this.annualEarnings.rows[2]['总收益'] = res.data;
          }
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style>
.payTotalDiv {
  width: 450px;
  height: 150px;
  background-color: #19d2ad;
  margin-left: 50px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
}

.payTotalDivData1 {
  color: #ffffff;
  font-size: 50px;
  position: absolute;
  top: 30%;
  left: 10%;
}

.payTotalDivData2 {
  color: #ffffff;
  font-size: 35px;
  position: absolute;
  top: 35%;
  left: 5%;
}
</style>